<template>
    <div ref="chartRef" style="width: 100%; height: 500px;"></div>
</template>

<script setup>
  import { onMounted, onBeforeUnmount, ref, watch, toRefs } from 'vue';
  import * as echarts from 'echarts';

const props=defineProps({
  chartData_pie: {
    type: Object,
    default: () => ({
      series: [
        { value: 1048, name: 'a' },
        { value: 735, name: 'b' },
        { value: 880, name: 'c' },
        { value: 484, name: 'd' },
        { value: 300, name: 'e' }
      ],
      title_text:'1111'
    })
  }
})
const { chartData_pie } = toRefs(props);//使用 toRefs 来解构 props

  const chartRef = ref(null);  
  let Chart_pie = null; 


const option = () => ({
  title: {
    text: chartData_pie.value.title_text,
    subtext: '副标题',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'//鼠标悬停自身会触发  trigger: 'axis'悬停 X 轴
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    // legend：图例
    // orient: 'vertical',//图例的布局朝向 'horizontal' 水平，'vertical' 垂直
    // left: '20',  //bottom:'bottom'
    // top: 'center',  // 图例垂直居中对齐
    // textStyle: {
    //     color: '#333',  // 图例文字颜色
    //     fontSize: 12    // 图例文字大小
    // }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',//环形图radius: ['40%', '70%'],
      data: chartData_pie.value.series,
      labelLine: {show: false},//引导线样式
      // itemStyle: {             //单个数据项样式
      //   borderRadius: 10,
      //   borderColor: '#fff',
      //   borderWidth: 2
      // },
      // label: {                 //标签样式
      //   show: false,
      //   position: 'inside'
      // },
      emphasis: {//鼠标悬停状态下的样式
        itemStyle: {//数据项样式
          shadowBlur: 10,//阴影的模糊程度
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        label: {//标签样式
          show: false,
          position: 'inside',//'outside' 'inside' 'center'
          fontSize: 40,
          fontWeight: 'bold'
        }
      }
    }
  ]
/*
//南丁格尔玫瑰图
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['30%', '50%'],//定义饼图的中心位置
      roseType: 'radius',
      itemStyle: {
        borderRadius: 8//内环
      },
      data: [
        { value: 10, name: 'rose 1' },
        { value: 10, name: 'rose 2' },
        { value: 15, name: 'rose 3' },
        { value: 12, name: 'rose 4' },
        { value: 10, name: 'rose 8' }
      ]
    }
  ]
  */
})


const initChart = () => {
  Chart_pie = echarts.init(chartRef.value);  
  Chart_pie.setOption(option());
}


 //监听特定的属性,对象{ deep: true }
watch(() => chartData_pie.value.series, () => {
  if (Chart_pie) {
    Chart_pie.setOption(
      {
        series: [{
          data: chartData_pie.value.series
        }]
     }
    );
  }
});

watch(() => chartData_pie.value.title_text, () => {
  if (Chart_pie) {
    Chart_pie.setOption( {
      title: {
        text:chartData_pie.value.title_text
       }
     });
  }
});
 

 /*
//监听整个 chartData_pie
watch(chartData_pie, () => {
  if (Chart_pie) {
    Chart_pie.setOption(option());
  }
}, { deep: true });
*/
onMounted(() => {
  initChart()         
});

onBeforeUnmount(() => {
  if (Chart_pie) {
    Chart_pie.dispose();  // 销毁 ECharts 实例
    Chart_pie = null; 
  }
});



  </script>

<style lang="scss" scoped>

</style>